<template>
	<view style="height: 100%;">
		<u-toast ref="uToast"></u-toast>
		<view style="padding-left: 20rpx;">
			<p style="font-size: 40rpx;font-weight: 900;">第{{order+1}}题</p>
			<text style="font-size: 35rpx;margin-top: 10rpx;word-break:break-all">{{detail.examinationFrontQuestionInfos[order].questionContent}}</text>
		</view>
		<view v-if="detail.examinationFrontQuestionInfos[order].questionAnswerType=='0'" style="padding-left: 20rpx;margin-top: 20rpx;word-break:break-all">
			<u-radio-group v-model="Answer" wrap="true" @change="radioGroupChange">
				<view class="question__option__item" @tap="changeanswer('A')">
					<u-radio name="A" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].a}}
					</u-radio>
				</view>
				<view class="question__option__item" @tap="changeanswer('B')">
					<u-radio name="B" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].b}}
					</u-radio>
				</view>
				<view class="question__option__item" @tap="changeanswer('C')">
					<u-radio name="C" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].c}}
					</u-radio>
				</view>
				<view class="question__option__item" @tap="changeanswer('D')">
					<u-radio name="D" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].d}}
					</u-radio>
				</view>
			</u-radio-group>
		</view>
		<view v-if="detail.examinationFrontQuestionInfos[order].questionAnswerType=='1'" style="padding-left: 20rpx;margin-top: 20rpx;word-break:break-all">
			<u-radio-group v-model="Answer" wrap="true" @change="radioGroupChange">
				<view class="question__option__item" @tap="changeanswer('true')">
					<u-radio name="true" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].a}}
					</u-radio>
				</view>
				<view class="question__option__item" @tap="changeanswer('false')">
					<u-radio name="false" label-size="35rpx" :label-disabled="dis">
						{{detail.examinationFrontQuestionInfos[order].b}}
					</u-radio>
				</view>
			</u-radio-group>
		</view>
		<view v-if="see!=0" style="font-size: 50rpx;">
			<text>正确答案：</text>
			<text v-if="see==1" style="color: #00ff7f;">{{detail.examinationFrontQuestionInfos[order].questionAnswer}}</text>
			<text v-if="see==2" style="color: #ff0000;">{{detail.examinationFrontQuestionInfos[order].questionAnswer}}</text>
		</view>
		<view style="width: 100%;height: 100rpx;position: fixed;bottom: 0rpx;">
			<u-row>
				<u-col span="4">
					<view style="height: 30rpx;">

					</view>
					<u-row>
						<u-col span="4">
							<text style="font-size: 30rpx;">{{order+1}}/{{max}}</text>
						</u-col>
						<u-col span="2">
							<image src="../../static/yes.png" style="width: 40rpx;height: 40rpx;">
						</u-col>
						<u-col span="2">
							<text style="font-size: 30rpx;">{{trueAmount}}</text>
						</u-col>
						<u-col span="2">
							<image src="../../static/no.png" style="width: 40rpx;height: 40rpx;">
						</u-col>
						<u-col span="2">
							<text style="font-size: 30rpx;">{{falseAmount}}</text>
						</u-col>
					</u-row>

				</u-col>
				<u-col span="4">
					<button @click="save(detail.examinationFrontQuestionInfos[order].questionId)" style="height: 70rpx;text-align: center;font-size: 30rpx;"
					 :disabled="dis">保存</button>
				</u-col>
				<u-col span="4">
					<button @click="end" style="height: 70rpx;text-align: center;font-size: 30rpx;" v-if="order==max-1" :disabled="dis">提交</button>
					<button @click="next" style="height: 70rpx;text-align: center;font-size: 30rpx;" v-else :disabled="dis">下一题</button>
				</u-col>
			</u-row>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				examinationId: '',
				detail: [],
				max: 0,
				order: 0,
				trueAmount: 0,
				falseAmount: 0,
				Answer: '',
				see: 0,
				dis: false
			}
		},
		onLoad: function(option) {
			this.examinationId = option.testid;
			this.$u.api.selectExaminationFront({
				studentId: getApp().globalData.studentId,
				examinationId: option.testid
			}).then(res => {
				this.detail = res.rows[0];
				this.max = res.rows[0].questionSum;
				this.order = res.rows[0].currentSoft;
				this.trueAmount = res.rows[0].trueAmount;
				this.falseAmount = res.rows[0].falseAmount;
				console.log(this.detail)
			})
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				//console.log(e);
				console.log(this.Answer)
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},


			changeanswer(ans) {
				if (this.dis == false) {
					this.Answer = ans;
				}

			},
			save(qid) {
				this.$u.api.saveExamination({
					studentId: getApp().globalData.studentId,
					examinationId: this.examinationId,
					questionId: qid,
					selectAnwser: this.Answer
				}).then(res => {
					this.$refs.uToast.show({
						title: '保存成功',
						type: 'success',
						isTab: true,
						duration: 500
					})
				})
			},
			//下一题
			next() {
				if (this.Answer === this.detail.examinationFrontQuestionInfos[this.order].questionAnswer) {
					this.trueAmount++;
					this.see = 1;
				} else {
					this.falseAmount++;
					this.see = 2;
				}
				this.dis = true;
				var that = this;
				setTimeout(function() {
					that.Answer = '';
					that.see = 0;
					that.order++;
					that.dis = false;
				}, 1000);

			},
			//提交
			end() {
				if (this.Answer === this.detail.examinationFrontQuestionInfos[this.order].questionAnswer) {
					this.trueAmount++;
					this.see = 1;
				} else {
					this.falseAmount++;
					this.see = 2;
				}
				this.dis = true;
				var that = this;
				this.$u.api.saveExamination({
					studentId: getApp().globalData.studentId,
					examinationId: this.examinationId,
					questionId: this.detail.examinationFrontQuestionInfos[this.order].questionId,
					selectAnwser: this.Answer
				}).then(res => {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						isTab: true,
						duration: 500
					})
					uni.navigateTo({
						url: '/pages/examination/exam_end?examinationId='+this.examinationId,
					})
				})
				setTimeout(function() {
					that.Answer = '';
					that.see = 0;
					that.dis = false;
				}, 1000);
				/* uni.navigateTo({
					url: '/pages/examination/exam_end'
				}) */
			}
		}
	}
</script>

<style>
	.question__option__item {
		display: flex;
		width: 100%;
		padding: 20upx 20upx;
		margin-top: 30upx;
		font-size: 40upx;
		color: #232131;
		/* background: #cccccc; */
		border-radius: 14upx;
		overflow: hidden;
	}
</style>
